<template>
	<view style="height: 100%;">
		<navbar title="报名详情" :back="true" color="#fff" leftIconColor="#fff"></navbar>
		<view style="position: fixed;z-index: 20000;left: 0;width: 100%;background-color: #3277fc;padding-top: 20rpx;" :style="{top:`${topheight}px`}">
			<view  style="background-color: rgba(167, 167, 167,.2);border-radius: 26rpx;margin:0 40rpx 20rpx 40rpx;">
				<u-search placeholder="输入人员姓名或电话" v-model="page.keyword" shape="round" :showAction="false" @search="search" bgColor='#fff' color='#000' placeholderColor='#999' searchIconColor='#999'>
				</u-search>
			</view>
			<u-tabs :list="tabList" @click="changTab" lineColor="#fff" :inactiveStyle="{color:'#fff',fontWeight:'450'}" :activeStyle="{color:'#fff',fontWeight:'650'}"></u-tabs>
			<u-tabs :list="tarList" @click="tarTab" lineColor="#fff" :inactiveStyle="{color:'#fff',fontWeight:'450'}" :activeStyle="{color:'#fff',fontWeight:'650'}"></u-tabs>
		</view>
		<view style="height: 280rpx;"></view>
		<view class="conter">
		    <view style="padding: 0 20rpx 20rpx 20rpx;" v-if="list.length!=0">
				<view v-for="(item,index) in list" :key="index" style="background-color:#fff;border-radius: 20rpx;margin-top: 20rpx;padding: 20rpx;">
					<view style="display: flex;justify-content: space-between;align-items:center">
						<view style="width: 70rpx;"></view>
						<view style="font-weight: 650;font-size: 28rpx;">人员详情</view>
						<view style="color:red;font-weight: 650;font-size: 28rpx;">{{item.statue==1?'预约中':item.statue==2?'进行中':item.statue==3?'已签到':item.statue==4?'已结束':item.statue==5?'未到场':''}}</view>
					</view>
					<view style="font-size: 24rpx;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;margin-top: 10rpx;">姓名: {{item.name}}</view>
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<view style="font-size:24rpx;margin: 10rpx 0;">电话号码 : {{item.phone}}</view>
						<view style="width: 120rpx;text-align: center;padding:8rpx 0;border-radius: 20rpx;font-size: 24rpx;border: 2rpx solid #000;" @click="callphone(item.phone)">拨打电话</view>
					</view>
					<view style="font-size:24rpx;margin: 10rpx 0;">人员类型 : {{item.type==0?'达人':item.type==1?'商家':item.type==2?'团长':item.type==3?'机构':''}}</view>
					<view style="font-size:24rpx;margin: 10rpx 0;">参会人数 : {{item.people}}</view>
				<!-- 	<view style="font-size:24rpx;margin: 10rpx 0;">邀约人 : {{item.official}}</view> -->
					<view style="font-size:24rpx;margin: 10rpx 0;" v-if="item.type==0">uuid : {{item.uuid}}</view>
					<view style="font-size:24rpx;margin: 10rpx 0;" v-if="item.type==1">品牌名称 : {{item.brand}}</view>
					<view style="font-size:24rpx;margin: 10rpx 0;" v-if="item.type==1">店铺名称 : {{item.shop}}</view>
					<view style="font-size:24rpx;margin: 10rpx 0;" v-if="item.type==1">店铺短ID : {{item.shopId}}</view>
					<view style="font-size:24rpx;margin: 10rpx 0;" v-if="item.type==2">团长名称 : {{item.teamName}}</view>
					<view style="font-size:24rpx;margin: 10rpx 0;" v-if="item.type==2">团长等级 : {{item.teamLevel}}</view>
						<view style="font-size:24rpx;margin: 10rpx 0;" v-if="item.type==3">机构名称 : {{item.mechanismName}}</view>
					<view style="font-size:24rpx;margin: 10rpx 0;" v-if="item.type==1||item.type==2">类目 : {{item.cate}}</view>
					<view style="font-size:24rpx;margin:10rpx 0;">报名时间 : {{item.addTime}}</view>
				    <view style="font-size: 24rpx;" v-if="item.trafficType">
						<view style="font-size: 24rpx;margin: 10rpx 0;">二次报名时间 : {{item.trafficTime}}</view>
						<view style="font-size:24rpx;margin:10rpx 0;">交通工具 : {{item.trafficType==1?'飞机':item.trafficType==2?'高铁':item.trafficType==3?'自驾':item.trafficType==4?'其他':''}}</view>
					    <view style="font-size: 24rpx;margin: 10rpx 0;">出发时间 : {{item.trafficBeginTime}}</view>
						<view style="font-size: 24rpx;margin: 10rpx 0;">到达时间 : {{item.trafficEndTime}}</view>
					</view>
					<view style="font-size: 26rpx;margin: 10rpx 0;display: flex;justify-content: space-between;align-items: center;" v-else>
						<view class=""></view>
						<view class="">暂未二次报名填写,请核实确认</view>
					</view>
				</view>
			</view>
	        <view class="" v-else>
	        	<u-empty
	        	        mode="list"
	        	        icon="http://cdn.uviewui.com/uview/empty/list.png"
	        			text='暂无报名详情'
	        	>
	        	</u-empty>
	        </view>
		</view>
	</view>
</template>

<script>
	import navbar from "@/components/baseNavbar.vue"
	import {
		getusermanageList
	} from "@/api/make.js"
	export default{
		components:{
			navbar
		},
		data(){
			return{
				loadend: false,
				loading: false,
				topheight:'',
				list:[],
				tabList:[
					{
						name:'全部',
						statue:''
					},{
						name:'预约中',
						statue:1
						
					},{
						name:'进行中',
						statue:2
					},{
						name:"已签到",
						statue:3
					},{
						name:'已结束',
						statue:4
						
					},{
						name:'未到场',
						statue:5
					}
				],
				tarList:[
					{
						name:'全部',
						statue:''
					},{
						name:'飞机',
						statue:1
						
					},{
						name:'高铁',
						statue:2
					},{
						name:"自驾",
						statue:3
					},{
						name:'其他',
						statue:4
					}
				],
				type:[],
				page: {
					page: 1,
					limit: 10,
					statue:'',
					trafficStatue:'',
					oid:'',
					keyword:''
				}
			}
		},
		onLoad(option){
			if(option.id){
				this.page.oid = option.id
				this.resetList()
			}
			this.topheight = uni.getMenuButtonBoundingClientRect().bottom+4
		},
		methods:{
			search(){
				this.resetList()
			},
			goCard(url, appid) {
				if (appid) {
					uni.navigateToMiniProgram({
						appId: appid,
						path: url,
						envVersion: 'release'
					})
				} else {
					goNav(url)
				}
			
			},
			callphone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone.toString() //仅为示例 this.servicePhone是你要拨打的电话号码
				});		
			},
			changTab(e){
				this.page.statue = e.statue
				console.log(this.page.statue);
				this.resetList()
			},
			tarTab(e){
				this.page.trafficStatue = e.statue
				this.resetList()
			},
			resetList(callback){
				this.page.page = 1;
				this.loading = false
				this.loadend = false
				this.list = []
				this.getList(callback)
				
			},
			getList(callback) {
				if (this.loadend || this.loading)
					return
				this.loading = true
				getusermanageList(this.page).then(res => {
					this.page.page++
					this.$set(this, 'list', this.list.concat(res.data.list))
					this.list.forEach(item=>{
						console.log('111111111111');
						item.proType=[]
						let pType=[]
						item.type.forEach(e=>{
							console.log('211111111111');
							let obj = {}
							if(e==0){
								obj.type='达人'
								obj.makeNum = item.drMakeNum
								obj.People=item.drPeople
								console.log('311111111111');
								item.proType.push(obj)
								
							}else if(e==1){
								obj.type='商家'
								obj.makeNum = item.sjMakeNum
								obj.People=item.sjPeople
								item.proType.push(obj)
								console.log('411111111111');
							}else if(e==2){
								obj.type='团长'
								obj.makeNum = item.tzMakeNum
								obj.People=item.tzPeople
								item.proType.push(obj)
								console.log('511111111111');
							}else if(e==3){
								obj.type='机构'
								obj.makeNum = item.jgMakeNum
								obj.People=item.jgPeople
								item.proType.push(obj)
								console.log('511111111111');
							}
						})
					})
					console.log('list',this.list);
					
					this.loading = false
					if (!res.data.hasNextPage)
						this.loadend = true
					if (callback != undefined) {
						callback()
					}
				}).catch(err => {
					this.loading = false
					this.loadend = true
					if (callback != undefined) {
						callback()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color: #f6f6f6;
	}
</style>